<template>
    <section class="EmployeeStatus">
        <div class="title">
            <div class="left-box">
                <svg-icon width="28" height="28" name="MyReport-dark" />
                <!-- <span class="title-text">
                    数据字典
                </span> -->
            </div>
            <a-button @click="Add"><i class="fa fa-plus" /></a-button>
        </div>
        <!-- <a-form ref="formRef" :model="formState" name="basic" autocomplete="off">
            <a-row :span="24">
                <a-col :span="4">
                    <a-form-item :label="$t('轮班')">
                        <a-select ref="select" v-model:value="formState.tenantId" @focus="getEmployeeStatusList"
                            @change="queryLists">
                            <a-select-option v-for="(val, i) in StatusLists" :key="i" :value="val.id">
                                {{ isCn ? val.descZh : isEn ? val.dictDesc : val.descAr ? val.descAr : val.dictDesc }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form> -->
        <a-table :pagination="false" :columns="columns" :data-source="tableDatas" :loading="loading">
            <template #bodyCell="{ column, text, record }">
                <!-- <template v-if="column.dataIndex === 'status'">
                    <span :style="{
                        color: text === 1 ? '#000000' : '#e25535',
                    }">
                        {{ text === 1 ? $t("启用") : $t("禁用") }}
                    </span>
                </template> -->
                <template v-if="column.dataIndex === 'opts'">
                    <div class="opts">
                        <i class="far fa-edit" @click="Edit(record)" />
                        <a-popconfirm placement="top" :ok-text="$t('确定')" :cancel-text="$t('取消')"
                            @confirm="handlDelete(record)">
                            <template #title>
                                <p>{{ $t("删除提示") }}</p>
                            </template>
                            <i class="far fa-trash-alt" style="cursor: pointer; color: red;margin-right: 10px" />
                        </a-popconfirm>
                    </div>
                </template>
            </template>
        </a-table>
        <AddDialog v-model:visible="isVisible" :target="target" @ok="queryLists" />
    </section>
</template>

<script lang='ts' setup>
import { queryDictKey } from "@/api/user/index";
import { GetCodeDict, GetBatchCodeDict, DeleteDictItem } from "@/api/public";
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n';
import { GenItem, AddItem } from './item-data'
import AddDialog from './add-dialog.vue'
import { useLanguage } from "@/hooks/index"
const { isEn, isCn, isArabic } = useLanguage()
let isVisible = ref(false)
let loading = ref(false)
const { t: $t } = useI18n();
let target = ref()
let formState = ref(
    {
        dictKey: "employeeRotationDesc",
        // pageNo: '1',
        // pageSize: "10"
    }
)
let StatusLists = ref([])
let columns = ref([
    {
        title: () => $t("轮班"),
        dataIndex: "dictData",
        align: "center",
    },
    // {
    //     title: () => $t("nameZh"),
    //     dataIndex: "descZh",
    //     align: "center",
    // },
    // {
    //     title: () => $t("nameEn"),
    //     dataIndex: "dictDesc",
    //     align: "center",
    // },
    // {
    //     title: () => $t("nameAr"),
    //     dataIndex: "descAr",
    //     align: "center",
    // },
    {
        title: $t("操作"),
        dataIndex: "opts",
        align: "center",
    },
])
let tableDatas = ref([])
const handleViewBtn = () => { }
const handleUpdate = () => { }
const Add = () => {
    isVisible.value = true
    target.value = {}
}
const Edit = (value) => {
    isVisible.value = true
    target.value = value
}
const handlDelete = async (record) => {
    const uuid = record.uuid
    if (!uuid) return
    await DeleteDictItem(uuid)
    message.success($t("操作成功"))
    queryLists()
}
const queryLists = async () => {
    loading.value = true
    const { data } = await GetCodeDict(formState.value).finally(() => {
        loading.value = false
    })
    tableDatas.value = data ?? []
}
const getEmployeeStatusList = async () => {
    loading.value = true
    const { data } = await queryDictKey("employeeRotationDesc").finally(() => {
        loading.value = false
    })
    StatusLists.value = data ?? []
}
onMounted(() => {
    queryLists()
})
</script>
<style lang='scss' scoped>
.EmployeeStatus {
    padding: 24px;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .left-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
        .opts {
            display: flex;
            justify-content: center;
            grid-column-gap: 10px;
        }
}
</style>